<template>
  <div class="cmt">
    <h1>发表评论</h1>
    <br />
    <textarea placeholder="请输入要bb的内容（最多吐槽120字）" maxlength="120" v-model="comment"></textarea>

    <mt-button type="primary" size="large" @click.prevent="comitdata">发表评论</mt-button>
    <div class="cmt-list">
      <div class="cmt-item" v-for="(item, i) in msg" :key="i">
        <div class="cmt-title"> <span>第{{i+1}}楼</span> &nbsp;&nbsp; <span>用户：{{item.name}}</span> &nbsp;&nbsp; <span>发表时间：{{item.time|dataFormat}}</span> </div>
        <div class="cmt-body">{{item.comment}}</div>
      </div>
    </div>

    <mt-button type="danger" size="large" plain>加载更多</mt-button>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      comment: "",
      name: "匿名用户",
      msg: [
        {
          name: "刘备",
          time: new Date(),
          comment: "锄禾日当午"
        }
      ]
    };
  },
  //   created: {},
  methods: {
    comitdata() {
      if (this.comment.trim()!='') {
        this.msg.unshift({
          name: this.name,
          time: new Date(),
          comment: this.comment.trim()
        });
        this.comment='';
      }else{
          Toast('评论不能为空');
      }
    }
  }
};
</script>
<style scoped>
.cmt h1 {
  font-size: 18px;
}
.cmt textarea {
  font-size: 14px;
  height: 85px;
  margin: 0;
}
.cmt .cmt-list {
  margin: 10px 0;
}
.cmt .cmt-item {
  font-size: 13px;
}
.cmt .cmt-title {
  background-color: #ccc;
  padding: 5px;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
}
.cmt .cmt-body {
  line-height: 35px;
  text-indent: 2em;
}
</style>